<!-- 有时，我们希望显示数组经过过滤或排序后的内容，
    而不实际变更或重置原始数据。在这种情况下，
    你可以创建返回已过滤或已排序数组的计算属性。 -->

<template>
    <li v-for="n in evenNumbers" :key="n">{{ n }}</li>
</template>

<script setup>

import {ref, reactive, computed} from 'vue'


const numbers = ref([1, 2, 3, 4, 5])

const numbers2 = reactive([1, 2, 3, 4, 5])

const evenNumbers = computed(() => {
    // return numbers.value.filter((n) => n % 2 === 0)
    
    // 在计算属性中使用 reverse() 和 sort() 的时候务必小心！
    // 这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：
    // return numbers.value.reverse()

    // ...是扩展运算符。对数组和对象而言，就是将运算符后面的变量里东西每一项拆下来。
    // // 1.把数组中的元素孤立起来
    // let iArray = ['1', '2', '3'];
    // console.log(...iArray);
    // 打印结果  1 2 3

    // 用ref
    // return [...numbers.value].reverse()

    // 用reactive
    return [...numbers2].reverse()
    
})


</script>